<template>
  <div class="Bijidetail">
    <div class="Bijidetail-box">
      <div class="video">
        <video
          :src="bijidata.video_url"
          loop="loop"
          muted="muted"
          controls="controls"
          width="100%"
          height="270px"
          x5-video-player-fullscreen="true"
        ></video>
      </div>
      <div class="name">{{ bijidata.title }}</div>

      <div class="author">
        <div class="author-msg">
          <div class="author-img">
            <img :src="bijidata.author" alt="" />
          </div>
          <div class="author-name">
            {{ bijidata.author.n }}
          </div>
          <div>
            <van-button plain>
              <van-icon name="plus" />

              关注</van-button
            >
          </div>
        </div>
        <div class="like-biji">
          <div>
            <van-button plain type="primary" color="#FFB31A">
              <van-icon name="like-o" />
              {{ bijidata.like_count }}</van-button
            >
          </div>
          <div>
            <van-button type="info" color="#FFB31A">
              <van-icon name="star-o" />

              收藏</van-button
            >
          </div>
        </div>
      </div>

      <div class="introduce" v-for="(item, index) in contents" :key="index">
        <div>#{{ item.c }}</div>
      </div>

      <div class="biaoqian">
        {{ bijidata.share_info.name }}
      </div>
      <div>创建时间：{{ bijidata.publishtime }}前</div>
      <div>
        <div class="re-title">评论</div>

        <div
          class="re-user"
          v-for="(item, index) in initShowProData"
          :key="index"
        >
          <div class="reuser-img">
            <img :src="item.u.p" alt="" />
          </div>
          <div class="re-content">
            <div class="re-name">{{ item.u.n }}</div>
            <div class="re-text">{{ item.content[0].c }}</div>
          </div>
        </div>
        <div v-if="!isShowMore">
          <div class="more" @click="showMorere">查看更多</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Bijidetail",
  data() {
    return {
      videodata: [],
      id: "",
      bijidata: [],
      contents: [],
      reuser: [],
      //初始显示的1条评论数据
      initCount: 1,
      initShowProData: [],

      //是否显示更多评论数据
      isShowMore: false,
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getbijidata(this.id);
  },
  methods: {
    onChange(index) {},
    getbijidata() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/note/detail/" + `${this.id}`,
      })
        .then((res) => {
          this.bijidata = res.data.result.note;
          this.contents = res.data.result.note.contents;

          this.reuser = res.data.result.note.cs;

          this.initShowProData.push(...this.reuser.slice(0, this.initCount));

          if (this.reuser.length <= 1) {
            this.isShowMore = true;
          }
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    showMorere() {
      this.initShowProData.push(...this.reuser.slice(this.initCount));
      this.isShowMore = true;
    },
  },
};
</script>

<style lang="less" scoped>
.Bijidetail {
  letter-spacing: 1px;
}
.name {
  font-size: 20px;
  font-weight: bold;
  margin: 15px 25px;
}
.author {
  display: flex;
  justify-content: space-between;
}
.author-msg {
  display: flex;
}
.like-biji {
  width: 42%;
  display: flex;
  justify-content: space-around;
}
.author-img {
  width: 50px;
  height: 50px;
  margin-left: 5px;
}
.author-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.author-name {
  font-size: 13px;
  margin: auto 5px;
}
.introduce {
  font-size: 15px;
  margin: 10px;
}
.biaoqian {
  color: #e43;
  margin: 0 2px;
}
.re-title {
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}
.re-user {
  display: flex;
  margin: 12px 0;
}
.re-content {
  margin: 0 8px;
}
.reuser-img img {
  border-radius: 50%;
}
.re-name {
  font-size: 13px;
}
.re-text {
  font-size: 14px;
  padding: 10px 0;
}


</style>